<template>
  <view class="container">
    <view class="userInfo">
      <view view class="iconfont icon-user_header_head default_head"/>
      <view class="userIntroduction">
        <view class="username">用户名: {{ username }}</view>
        <view class="role">角色: {{ roleStr }}</view>
      </view>
    </view>
    <view class="functionInfo">
      <view class="functionCatalog">
        任务
      </view>
      <view class="subFunctionList" @click="toTaskPage">
        <view class="subFunctionInfo">
          <view view class="iconfont icon-renwu1 functionImage"/>
          <view class="functionDesc">查看任务</view>
        </view>
        <view class="subFunctionInfo">

        </view>
        <view class="subFunctionInfoLast">

        </view>
      </view>
    </view>
    <view class="functionInfo" style="height: 40%">
      <view class="functionCatalog">
        扫码工具
      </view>
      <view class="subFunctionList" style="height: 40%;">
        <view class="subFunctionInfo" @click="toScanSet">
<!--        <view class="subFunctionInfo" @click="searchProduct">-->
<!--          <view view class="iconfont icon-tiaomacaiji functionImage"/>-->
<!--          <view class="functionDesc">一键查询产品</view>-->
          <view view class="iconfont icon-fuwupinpai functionImage"/>
          <view class="functionDesc">扫码设置</view>
        </view>
        <view class="subFunctionInfo" @click="toVehicleBring">
          <view view class="iconfont icon-ruku functionImage"/>
          <view class="functionDesc">车辆带货</view>
        </view>
        <view class="subFunctionInfo" @click="toScanSet">
<!--          <view view class="iconfont icon-fuwupinpai functionImage"/>-->
<!--          <view class="functionDesc">扫码设置</view>-->
        </view>
<!--        <view class="subFunctionInfoLast">-->
<!--          <view view class="iconfont icon-chuku functionImage"/>-->
<!--          <view class="functionDesc">出库扫码</view>-->
<!--        </view>-->
      </view>
      <view class="subFunctionList" style="height: 40%;">
        <view class="subFunctionInfo">
<!--        <view class="subFunctionInfo" @click="toArrival">-->
<!--          <view view class="iconfont icon-caituiruku functionImage"/>-->
<!--          <view class="functionDesc">采购入库</view>-->
        </view>
        <view class="subFunctionInfo">
<!--          <view class="subFunctionInfo" @click="toScanSet">-->
<!--            <view view class="iconfont icon-fuwupinpai functionImage"/>-->
<!--            <view class="functionDesc">扫码设置</view>-->
<!--          </view>-->
        </view>
        <view class="subFunctionInfoLast">
        </view>
      </view>
    </view>
    <view class="functionInfo">
      <view class="functionCatalog">
        销售/退货
      </view>
      <view class="subFunctionList">
        <view class="subFunctionInfo" @click="toSaleReturnPage">
          <view view class="iconfont icon-xiaotuiruku functionImage"/>
          <view class="functionDesc">销售与退货</view>
        </view>
        <view class="subFunctionInfo">

        </view>
        <view class="subFunctionInfoLast">

        </view>
      </view>
    </view>
    <!--    <view class="functionInfo">-->
    <!--      <view class="functionCatalog">-->
    <!--        资源介绍-->
    <!--      </view>-->
    <!--      <view class="subFunctionList">-->
    <!--        <view class="subFunctionInfo">-->
    <!--          <view view class="iconfont icon-fuwupinpai functionImage"/>-->
    <!--          <view class="functionDesc">品牌方</view>-->
    <!--        </view>-->
    <!--        <view class="subFunctionInfo">-->
    <!--          <view view class="iconfont icon-stores functionImage"/>-->
    <!--          <view class="functionDesc">门店</view>-->
    <!--        </view>-->
    <!--        <view class="subFunctionInfoLast">-->
    <!--          <view view class="iconfont icon-chanpin functionImage"/>-->
    <!--          <view class="functionDesc">产品</view>-->
    <!--        </view>-->
    <!--      </view>-->
    <!--    </view>-->

    <custom-scan ref="$builtInScanCode" :navHeight="40" :dataList="scanCodeDataList"/>
  </view>
</template>

<script>
import {getRoles, getUserMe} from "@/apis/User";

export default {
  data() {
    return {
      username: '',
      roleStr: '',
      scanCodeDataList: []
    }
  },
  methods: {
    toTaskPage() {
      uni.navigateTo({
        url: '/pagesMine/task/task'
      })
    },
    toSaleReturnPage() {
      uni.navigateTo({
        url: '/pagesMine/warehouse/sale-return-order'
      })
    },
    toScanSet() {
      uni.navigateTo({
        url: '/pagesMine/scan/set-up'
      })
    },
    toArrival() {
      uni.navigateTo({
        url: '/pagesMine/warehouse/arrival-order'
      })
    },
    toVehicleBring() {
      uni.navigateTo({
        url: '/pagesMine/warehouse/vehicle-bring-goods'
      })
    },
    searchProduct() {  // 查询产品
      this.scanCode()
    },
    scanCodeError(type = 'error', text = '请扫描正确的二维码', modalFlag) {
      this.$refs.$builtInScanCode.scanTip({type, text, modalFlag})
    },
    scanCode() {
      this.scanCodeDataList = []
      this.$refs.$builtInScanCode.show({
        title: '请扫描二维码',
        scanCallback: ({result, type}) => {
          // 这里是扫描回调，扫到码后会调用这个方法
          return new Promise((resolve, reject) => {
            // 条形码 barcode
            // 二维码  qrcode
            // 该组件目前测试存在问题，只能返回type为 barcode和qrcode。无法区分比如DataMatrix码等类型
            if (!['QR_CODE', 'barcode', 'qrcode'].includes(type)) {
              console.log(type, 777777)
              // 这里判断码的类型，
              this.scanCodeError()
              resolve()
              return
            }
            try {
              // result是二维码内容
              // 这里写自己的扫码处理逻辑，如果是正确符合 调用this.scanCodeDataList.push(扫描结果)
              // 注意：扫描结果需要设置label字段，这个字段会在组件里面显示出来。
              /**
               * 扫描提示使用：
               * 成功：sacnCodeError('success', '这是成功内容')
               * 警告：sacnCodeError('warn', '这是警告内容')
               * 错误：sacnCodeError('error', '这是错误内容')
               * 实际是调用 组件的scanTip方法，方法参数看文章后面说明
               */

              // 例如处理逻辑这样....
              if (this.scanCodeDataList.find(e => e === result)) {
                this.scanCodeError('warn', '已存在')
                resolve()
                return
              }
              this.scanCodeDataList.push(result)
              resolve()
              return
            } catch (e) {
              this.scanCodeError()
              resolve()
            }
          })
        },
        delete: row => {
          // 单条删除回调
          const index = this.scanCodeDataList.findIndex(e => e.id === row.id)
          index > -1 && this.scanCodeDataList.splice(index, 1)
        },
        cancel: () => {
          // 清空回调
          this.scanCodeDataList = []
        },
        ok: () => {
          // 最终确定回调，调用组件close关闭组件
          this.$refs.$builtInScanCode.close()
          // 最终结果就是scanCodeDataList里面的内容，怎么处理你自己决定
          // ......
        }
      })

    }

  },
  async mounted() {
    let user = (await getUserMe()).data
    let roleInfos = (await getRoles()).data
    this.username = user.username
    let userRoleIds = user.roles
    for (let i = 0; i < roleInfos.length; i++) {
      for (let j = 0; j < userRoleIds.length; j++) {
        if (userRoleIds[j] === roleInfos[i].value) {
          this.roleStr = this.roleStr + roleInfos[i].label + ","
        }
      }
    }
    if (this.roleStr.length > 0) {
      this.roleStr = this.roleStr.substring(0, this.roleStr.length - 1)
    }
  },
}
</script>
<style>
page {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

// 去掉页面滚动条
::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}
</style>
<style lang="less" scoped>

.container {
  height: 100%;
  width: 100%;
  font-family: PingFangSC-Semibold, PingFang SC;
  padding: 30rpx;
  box-sizing: border-box;
  background: #d7d7d7;
  color: #333;

  .userInfo {
    display: flex;
    align-items: center;
    height: 10%;
    width: 100%;
    border-radius: 20px;
    box-sizing: border-box;
    background-color: #F7F7F7;

    .default_head {
      justify-content: flex-start;
      width: 15%;
      height: 80%;
      font-size: 108rpx;
      border-radius: 50%;
      margin-left: 3%;
    }

    .userIntroduction {
      margin-left: 3%;
      justify-content: flex-start;

      .username {
        font-size: 30rpx;
        color: #474747;
      }

      .role {
        font-size: 20rpx;
        color: #6a6a6a;
      }
    }
  }

  .functionInfo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 3%;
    height: 20%;
    width: 100%;
    border-radius: 20px;
    box-sizing: border-box;
    background-color: #F7F7F7;

    .functionCatalog {
      display: flex;
      align-items: center;
      width: 90%;
      height: 20%;
    }

    .subFunctionList {
      display: flex;
      align-items: center;
      justify-content: center;
      border-top: 1px solid #E7E7E7;
      width: 90%;
      height: 70%;

      .subFunctionInfo {
        .subFunctionInfoLast();
        border-right: 1px solid #E7E7E7;

        .functionImage {
          font-family: "iconfont" !important;
          width: 108rpx;
          height: 108rpx;
          font-size: 108rpx;
          color: #2196F3
        }

        .functionDesc {
          height: 20%;
          padding-top: 20rpx;
        }
      }

      .subFunctionInfoLast {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;

        .functionImage {
          font-family: "iconfont" !important;
          width: 108rpx;
          height: 108rpx;
          font-size: 108rpx;
          color: #2196F3
        }

        .functionDesc {
          padding-top: 20rpx;
          height: 20%;
        }
      }
    }


  }
}
</style>
